<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素的显隐</title>
</head>
<body>
    <button id="btn">点击元素的显隐</button>
    <div id="boxid"></div>
    <script>
        document.write('<p style="color:red;"><br>元素的显隐：改变 style样式中的 display值进行操作显隐。</p>')
        document.write('<p style="color:red;"><br>显示：元素对象.style.display = "block";</p>')
        document.write('<p style="color:red;"><br>隐藏：元素对象.style.display = "none"</p>')
        document.write('<p style="color:red;"><br>注：隐藏元素并不是删除元素，只是不让它在页面上显示，其标签代码依然还在。</p>')
        var eBtn = document.getElementById('btn');
        var box = document.getElementById('boxid');
        var flag = true;
        eBtn.onclick = function () {
            if(flag == true){
                box.style.display = 'none';
                flag = false;
            }else{
                box.style.display = 'block';
                flag = true;
            }
        }
    </script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #btn {
            width: 100px;
            height: 50px;
            border: 0;
            background-color: aqua;
            margin: 40px auto 20px auto;
            display: block;
        }

        #boxid {
            width:400px;
            height:400px;
            background-color: red;
            border: 0;
            margin: 0 auto;
        }
    </style>
</body>
</html>